<script setup lang="ts">
/**
 * @name ReportCenterEnergyConsumingUnit
 * @description 用能单元统计
 */

import dayjs from 'dayjs'
import { Download, List } from '@element-plus/icons-vue'
import type { DatePickType } from 'element-plus'
import { useEnergyConsumingUnit } from '@/mixins/ReportCenter/MixinEnergyConsumingUnit'
import { STORAGE_MODES } from '@/enum/modules/indicator'
import { useSimpleExportLists } from '@/components/TableLists/useSimpleExportLists'

import type { Point } from '@/components/ReadonlyPointTree/ReadonlyPointTree'

const [point, setPoint] = useState<Point | null>(null)
const {
  loading,
  columns,
  tableData,
  getEnergyConsumingUnitData,
} = useEnergyConsumingUnit()
const reportType = ref(STORAGE_MODES.DAY)
const [time, setTime] = useState(dayjs().format('YYYY-MM-DD'))

const pickerType = computed<DatePickType>(() => {
  switch (reportType.value) {
    case STORAGE_MODES.DAY:
      return 'date'
    case STORAGE_MODES.MONTH:
      return 'month'
    case STORAGE_MODES.YEAR:
      return 'year'
    default:
      return 'date'
  }
})
const pickerFormatter = computed(() => {
  switch (reportType.value) {
    case STORAGE_MODES.DAY:
      return 'YYYY-MM-DD'
    case STORAGE_MODES.MONTH:
      return 'YYYY-MM'
    case STORAGE_MODES.YEAR:
      return 'YYYY'
    default:
      return 'YYYY-MM-DD'
  }
})
const tableCaption = computed(() => {
  switch (reportType.value) {
    case STORAGE_MODES.DAY:
      return '能耗统计日报'
    case STORAGE_MODES.MONTH:
      return '能耗统计月报'
    case STORAGE_MODES.YEAR:
      return '能耗统计年报'
    default:
      return '能耗统计日报'
  }
})

function handleClickNode(o: Point) {
  setPoint(o)
}
function clickSearch() {
  const pointId = unref(point)?.id
  if (pointId) {
    const t = unref(time)
    getEnergyConsumingUnitData({
      pointId,
      timeType: unref(reportType),
      time: t === 'Invalid Date' ? dayjs().format(unref(pickerFormatter)) : unref(time),
    })
  }
}
function clickDownload() {
  const { exportXlsx } = useSimpleExportLists<any>({
    columns: unref(columns) as any,
    lists: unref(tableData),
  })

  exportXlsx(unref(tableCaption), () => {
    return [
      [{ v: unref(tableCaption), t: 's', s: {
        alignment: { horizontal: 'center', wrapText: true },
        font: { sz: 20 },
      } }],
      [
        '统计范围：',
        unref(point)?.pointFullName,
        ...Array(unref(columns).length - 4).fill(null),
        '统计时间：',
        unref(time),
      ],
    ]
  }, () => {
    return [
      { s: { r: 0, c: 0 }, e: { r: 0, c: unref(columns).length } },
    ]
  })
}

watchEffect(() => {
  setTime(
    dayjs(unref(time)).format(unref(pickerFormatter)),
  )
})
watch(
  [
    () => unref(point)?.id,
    () => unref(time),
  ],
  clickSearch,
)
</script>

<template>
  <div class="padding-sm flex container">
    <div class="points-container">
      <ReadonlyPointTree fire :need-full-name="1" @click-node="handleClickNode" />
    </div>
    <div class="margin-left-sm flex-fillRemaining roll flex-direction flex">
      <div class="flex-shrink-0">
        <ElForm inline>
          <ElFormItem label="报表类型">
            <ElRadioGroup v-model="reportType">
              <ElRadio :value="STORAGE_MODES.DAY">
                日报
              </ElRadio>
              <ElRadio :value="STORAGE_MODES.MONTH">
                月报
              </ElRadio>
              <ElRadio :value="STORAGE_MODES.YEAR">
                年报
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="统计时间">
            <ElDatePicker
              v-model="time"
              :type="pickerType"
              placeholder="选择日期"
              :value-format="pickerFormatter"
              :format="pickerFormatter"
            />
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" :icon="List" @click="clickSearch">
              统计
            </ElButton>
            <ElButton type="success" :icon="Download" @click="clickDownload">
              导出
            </ElButton>
          </ElFormItem>
        </ElForm>
      </div>
      <h3 class="m-0 text-center">
        {{ tableCaption }}
      </h3>
      <div
        class="flex items-center"
        style="
          font-size: var(--el-font-size-base);
          color: var(--el-text-color-secondary);
        "
      >
        <span class="text-truncate">统计范围：{{ point?.pointFullName }}</span>
        <span class="ml-auto text-truncate">统计时间：{{ time }}</span>
      </div>
      <ElTable
        v-loading="loading"
        class="mt-4 flex-1" :data="tableData"
        height="100%"
      >
        <template #empty>
          <TableEmpty />
        </template>
        <ElTableColumn
          v-for="(column, index) in columns"
          :key="index"
          :label="column.label" :prop="column.prop"
        />
      </ElTable>
    </div>
  </div>
</template>
